/*
    Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
    Licensed under the MIT License.
    contact:dcdev_founder@foxmail.com
*/

function create_layui_table(data) {
  var iframeHtml = $(`#preview_iframe_table_show`).get(0);
  console.log(data['data'])
  var all_html =`
    <link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"><\/script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"><\/script>
    <div id="app4" style="font-size: 14px">
     
    
      <template>
          <el-table
          :data="tableData"
          >
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="title"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="column_name"
              label="组件名">
            </el-table-column>
            <el-table-column
              prop="is_require"
              label="必填">
            </el-table-column>
            <el-table-column
              prop="default_value"
              label="初始值">
            </el-table-column>
            <el-table-column
              prop="options"
              label="项">
            </el-table-column>
            <el-table-column
              prop="options_title"
              label="项名">
            </el-table-column>
            <el-table-column
              prop="place_holder"
              label="文字提示">
            </el-table-column>
            <el-table-column
              prop="max_value"
              label="最大长度">
            </el-table-column>
            <el-table-column
              prop="min_value"
              label="最小长度">
            </el-table-column>
            <el-table-column
              prop="hidden"
              label="是否隐藏">
            </el-table-column>
            
        </el-table>
      </template>
    </div>
    <script type="text/javascript">
      //组件初始化
      var Main = {
        data() {
          return {
                //表格数据
                tableData: ${JSON.stringify(data['data'])}
              }
          }
      }
      var Ctor = Vue.extend(Main);
      new Ctor().$mount('#app4');
    <\/script>
  `
  iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
  iframeHtml.contentWindow.document.close();
  
}



function create_layui_table_toolbar(array, outter_class = "", outter_style = "") {
  var iframeHtml = $(`#preview_iframe_table_show`).get(0);
  console.log(data['data'])
  var all_html =`
    <link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"><\/script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"><\/script>
    <script src="./render_input_form_elementui.js"></script>
    <style>
    
      .inline.el-form-item
      {
          display:inline-block !important;
          vertical-align: top;
      }
      .inline.el-form-item .el-form-item__content{
        display:inline-block !important;
          vertical-align: top;
          margin-left:0 !important;
      }
      .inline.el-form-item .el-form-item__label {
        float: none;
        display: inline-block;
    }
  </style>
    <div id="app4" style="font-size: 14px">
     
    
      <template>
          <el-table
          :data="${Boolean(array['is_pagination'])?`tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)`:'tableData'}"
          >
            <el-table-column
              prop="type"
              label="类型"
              width="120">
            </el-table-column>
            <el-table-column
              prop="title"
              label="名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="column_name"
              label="组件名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="is_require"
              label="必填"
              width="120">
            </el-table-column>
            <el-table-column
              prop="default_value"
              label="初始值"
              width="120">
            </el-table-column>
            <el-table-column
              prop="options"
              label="项"
              width="120">
            </el-table-column>
            <el-table-column
              prop="options_title"
              label="项名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="place_holder"
              label="文字提示"
              width="120">
            </el-table-column>
            <el-table-column
              prop="max_value"
              label="最大长度"
              width="120">
            </el-table-column>
            <el-table-column
              prop="min_value"
              label="最小长度"
              width="120">
            </el-table-column>
            <el-table-column
              prop="hidden"
              label="是否隐藏"
              width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
               <template slot-scope="scope">
              ${Boolean(array['is_editable'])?
                `<i
                  class="el-icon-edit"
                  size="mini"
                  style="font-size: 28px;"
                  @click="handleEdit(scope.$index, scope.row)"></i>`:''
                  }
              ${Boolean(array['is_deletable'])?
                `<i
                  size="mini"
                  class="el-icon-folder-delete"
                  type="danger"
                  style="font-size: 28px;color: red;margin-left: 10px"
                  @click="handleDelete(scope.$index, scope.row)"></i>`:''
                }
              </template>
            </el-table-column>
        </el-table>
      </template>
      ${Boolean(array['is_pagination'])?`<el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change">
      </el-pagination>`:''}
      
      <div class="showform">
      </div>

    </div>
    <script type="text/javascript">
  //表单组件初始化
  var Main1 = {
    //表单组件的一些初始值以及值设置

    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            
          }
        },
        ruleForm: {
          text1:formdata['text1'],
          text2:formdata['text2'],
          password:formdata['password'],
          phone:formdata['phone'],
          email:formdata['email'],
          url:formdata['url'],
          identity:formdata['identity'],
          bool:formdata['bool'],
          select:formdata['select'],
          option:formdata['option'],
          checkbox:[formdata['checkbox']],
          number:formdata['number'],
          date:formdata['date'],
          fileList: [{${formdata['fileList']}}]
          
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            console.log(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
  var Ctor1 = Vue.extend(Main1);
  new Ctor1().$mount('#app3');
<\/script>
    <script type="text/javascript">
      //表格组件初始化
      var Main = {
        data() {
          return {
                //表格数据
                tableData: ${JSON.stringify(data['data'])},
                total: 60,
                pagesize:${array['limit']},
                currentPage:1,

              }
          },
          methods: {
            
            handleEdit(index, row) {
              console.log(JSON.stringify(row));
              var html = create_layui_input_form([row], "", "margin:10px;");
              $('.showform').html(html)
              new Ctor1().$mount('#app3');

            },
            handleDelete(index, row) {
              console.log(JSON.stringify(row));
              this.tableData.splice(index,1);
            },
           

              current_change:function(currentPage){
                this.currentPage = currentPage;
              },
        　　　　
          }
      }
      var Ctor = Vue.extend(Main);
      var ctor=new Ctor();
      ctor.$mount('#app4');



    <\/script>


  `
  iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
  iframeHtml.contentWindow.document.close();
  
}

var data = {
  id: "preview_iframe_table_show",
  // 用于渲染的数据
  data: array,
  // 是否分页
  is_pagination: 1,
  //每页显示行数
  limit:5,
  // 是否添加修改、删除按钮
  is_editable: 1,
  is_deletable: 1,
  outter_class: "",
  outter_style: ""
}
create_layui_table_toolbar(data);